<!DOCTYPE html>
<html>
	<head>
		<title>购物车</title>
		<meta charset="utf-8" />
		<style type="text/css">
			h1 {
				text-align: center;
			}

			table {
				margin: 0 auto;
				width: 60%;
				border: 2px solid #aaa;
				border-collapse: collapse;
			}

			table th,
			table td {
				border: 2px solid #aaa;
				padding: 5px;
			}

			th {
				background-color: #eee;
			}
		</style>

		<script type="text/javascript">

			/**
			*  添加到购物车
			*/
			function add_shoppingcart(btn){
				//获取当前行
				let tr = btn.parentNode.parentNode;
				let tds = tr.children;
				let name =  tds[0].innerText;
				let price =  tds[1].innerText;
				console.log("name:",name)
				console.log("price:",price)
				//给购物车添加一行
				let goodsTbody = document.getElementById("goods");
				
				//已添加到购物车的
				let existsGoodsIndex = -1;
				let cartTrs =  goodsTbody.children;
				for (var i = 0; i < cartTrs.length; i++) {
					let cartName = cartTrs[i].children[0].innerText;
					if(cartName == name){//查找到已添加到购物车的商品
						existsGoodsIndex = i;
						break;
					}
				}
				if(existsGoodsIndex != -1){
					let sumTd = cartTrs[existsGoodsIndex].children[2];
					let sumInput = sumTd.children[1];;
					sumInput.value = parseInt(sumInput.value) + 1
					calcLine(cartTrs[existsGoodsIndex]);

				}else{
					//创建tr
					let newTr = document.createElement("tr");
					
					newTr.innerHTML = `
							<td>${name}</td>
							<td>${price}</td>
							<td>     <input type="button" value="-"  onclick="deincrement(this)" />  
									<input type="text" name="sum" value="1"  />  
									<input type="button" value="+"  onclick="increment(this)"/>    </td>
							<td>${price}</td>
							<td>
								<input type="button" name="del" value="X"  onclick="deleteTr(this)"/>
							</td>
					`
					//将tr追加到tbody中
					goodsTbody.appendChild(newTr);
					calcAll();
				}
				
				
			}
			
			
			/**
			 *  calcLine 重新计算购物车中的某一行的金额
			 * <tr>
			 * <td>${name}</td>
				<td>${price}</td>
				<td>     <input type="button" value="-" />  
						<input type="text" name="sum" value="1"  />  
						<input type="button" value="+" />    </td>
				<td>${price}</td>
				<td>
					<input type="button" name="del" value="X" />
				</td>
				</tr>
			*/
			function 	calcLine(cartTr){
				let tds =  cartTr.children;
				let price  = tds[1].innerText;
				let sum = tds[2].children[1].value;
				
				tds[3].innerText = parseInt(price) * parseInt(sum);
			}


			/**
			 * @param {Object} btn
			 * 数量减少
			 */
			function deincrement(btn){
				let td = btn.parentNode;
				let sumInput = td.children[1];
				sumInput.value =  parseInt(sumInput.value) - 1;
				if(sumInput.value == 0){
					//删除当前行
					deleteTr(btn);
					
				}else{
					calcLine(td.parentNode);
					calcAll();
				}
			}
			/**
			 * @param {Object} btn
			 * 数量增加
			 */
			function increment(btn){
				let td = btn.parentNode;
				let sumInput = td.children[1];
				sumInput.value =  parseInt(sumInput.value) + 1;
				calcLine(td.parentNode);
				calcAll();
			}
			
			
			function deleteTr(btn){
				let tr = btn.parentNode.parentNode;
				tr.remove();
				calcAll();
			}

			
			function calcAll(){
				let goodsTbody = document.getElementById("goods");
				//已添加到购物车的
				let cartTrs =  goodsTbody.children;
				let allSum = 0;
				for (var i = 0; i < cartTrs.length; i++) {
					let lineSum = cartTrs[i].children[3].innerText;
					allSum += parseInt(lineSum);
				}
				//allSum
				document.getElementById("total").innerText = allSum;
			}
	
		</script>
	</head>
	<body>
		<h1>真划算</h1>
		<table>
			<tr>
				<th>商品</th>
				<th>单价(元)</th>
				<th>颜色</th>
				<th>库存</th>
				<th>好评率</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>罗技M185鼠标</td>
				<td>80</td>
				<td>黑色</td>
				<td>893</td>
				<td>98%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
				</td>
			</tr>
			<tr>
				<td>微软X470键盘</td>
				<td>150</td>
				<td>黑色</td>
				<td>9028</td>
				<td>96%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
				</td>
			</tr>
			<tr>
				<td>洛克iphone6手机壳</td>
				<td>60</td>
				<td>透明</td>
				<td>672</td>
				<td>99%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
				</td>
			</tr>
			<tr>
				<td>蓝牙耳机</td>
				<td>100</td>
				<td>蓝色</td>
				<td>8937</td>
				<td>95%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
				</td>
			</tr>
			<tr>
				<td>金士顿U盘</td>
				<td>70</td>
				<td>红色</td>
				<td>482</td>
				<td>100%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
				</td>
			</tr>
		</table>



		<h1>购物车</h1>
		<table>
			<thead>
				<tr>
					<th>商品</th>
					<th>单价(元)</th>
					<th>数量</th>
					<th>金额(元)</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody id="goods">

			</tbody>
			<tfoot>
				<tr>
					<td colspan="3" align="right">总计</td>
					<td id="total"></td>
					<td></td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
